<template>
	<view class="center">
		<view class="center_top">
			<view class="mask"></view>
		</view>
		<view class="center_box_bg">
			<view class="base">
				<view :class="[siteList.length == index+1?'noline':'','item']" v-for="(res, index) in siteList"
					:key="res.id">
					<view class="top">
						<view class="name">{{ res.name }}</view>
						<view class="phone">{{ res.tel }}</view>
						<view class="tag" v-if="res.isDefault==1">
							<text>默认</text>
						</view>
					</view>
					<view class="bottom">
						<text class="addressDec">{{res.province+res.city+res.county+res.addressDetail}}</text>
						<u-icon name="edit-pen" :size="40" color="#999999" @click="toAddSite(res.aid)"></u-icon>
					</view>
				</view>
				<view style="text-align:center;width:100%;" v-show="siteList == ''">
					<u-empty text="请添加收货地址" mode="list"></u-empty>
				</view>
			</view>
			<view class="baiban"></view>

		</view>
		<view class="addSite" @click="toAddSite(0)">
			<view class="add">
				<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>
				新建收货地址
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				siteList: [],
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				this.$request({
					url: '/findAddress',
					success: res => {
						// console.log(res);
						this.siteList = res.data.result
					}
				});
			},
			toAddSite(e) {
				uni.navigateTo({
					url: `/pages/my/proile/address/addSite?id=${e}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.center {
		height: 100%;

		&_top {
			height: 18%;
			background-size: cover;

			.mask {
				background-color: #134cdc;
				height: 100%;
			}
		}

		&_box_bg {
			background: #f9f9f9;
			position: relative;

			.baiban {
				background: #fefefe;
			}

			.base {
				position: absolute;
				width: 90%;
				margin: 0 auto;
				top: -100upx;
				left: 5%;
				background: #fefefe;
				padding: 35upx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				box-shadow: 0px 2px 5px #ededed;
				border-radius: 30upx;
				overflow-y: auto;

				.item {
					padding: 40rpx 0;
					border-bottom: 1px solid #efefef;

					.top {
						display: flex;
						font-size: 34rpx;

						.phone {
							margin-left: 30rpx;
						}

						.tag {
							display: flex;
							font-weight: normal;
							align-items: center;

							text {
								display: block;
								width: 60rpx;
								height: 34rpx;
								line-height: 34rpx;
								color: #ffffff;
								font-size: 20rpx;
								border-radius: 20rpx;
								text-align: center;
								margin-left: 30rpx;
								background-color: #1a4ae7;
							}
						}
					}

					.bottom {
						display: flex;
						margin-top: 20rpx;
						font-size: 28rpx;
						justify-content: space-between;
						color: #999999;

						.addressDec {
							color: #808080;
							width: 530rpx;
							text-align: start;
							display: -webkit-box;
							white-space: pre-wrap;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}
					}
				}

				.noline {
					border-bottom: none;
				}
			}
		}

		.addSite {
			display: flex;
			justify-content: space-around;
			width: 600rpx;
			line-height: 100rpx;
			position: absolute;
			bottom: 30rpx;
			left: 80rpx;
			background-color: #0c34ba;
			border-radius: 60rpx;
			font-size: 30rpx;

			.add {
				display: flex;
				align-items: center;
				color: #ffffff;

				.icon {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
